<script setup lang="ts">
import { ref } from 'vue'
import { NAvatar } from 'naive-ui'
import ReplyBox from './ReplyBox.vue'
import type { FlatReply } from '../types/comment'
import { formatDate } from '../utils/format'
import { Icon } from '@iconify/vue'

const { reply, rootCommentId } = defineProps<{
  reply: FlatReply
  rootCommentId: number
}>()

const emit = defineEmits<{
  (e: 'reply', data: any): void
}>()

// 回复框显示状态
const showReplyBox = ref(false)

// 处理回复提交
const handleSubmitReply = (data:any) => {
  emit('reply', data)
}
</script>

<template>
  <div class="reply-item">
    <n-avatar round :size="30" :src="reply.avatar || '/placeholder.jpg'" />
    <div class="reply-content">
      <div class="reply-header">
        <span class="username">{{ reply.userName }}</span>
        <span class="time">{{ formatDate(reply.createdTime) }}</span>
      </div>
      <div class="reply-text">
        <!-- 只有回复其他回复的评论才显示"回复@用户名" -->
        <template v-if="reply.parentId !== rootCommentId && reply.toName">
          回复 <span class="reply-to">@{{ reply.toName }}</span
          >：{{ reply.content }}
        </template>
        <template v-else>
          {{ reply.content }}
        </template>
        <div class="mt-10px flex gap-10px">
          <n-image
            v-for="(url, index) in reply.picUrlList"
            :key="index"
            :src="url"
            class="w-100px h-100px rounded"
          />
        </div>
      </div>
      <div class="reply-actions">
        <Icon icon="vaadin:comments-o" width="10" height="10" />
        <span @click="showReplyBox = !showReplyBox">{{
          showReplyBox ? '取消回复' : '评论'
        }}</span>
      </div>
    </div>
  </div>
  <!-- 回复框 -->
  <ReplyBox
    v-if="showReplyBox"
    :target="reply"
    @submit="handleSubmitReply"
    @cancel="showReplyBox = false"
  />
</template>

<style scoped>
.reply-item {
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px 0;
  margin-bottom: 16px;
}

.reply-item:last-child {
  margin-bottom: 0;
}

.reply-item > .n-avatar {
  margin-right: 12px;
}

.reply-item {
  display: flex;
  flex-direction: row;
}

.reply-content {
  flex: 1;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.username {
  font-weight: 500;
  font-size: 14px;
  color: #333;
}

.time {
  font-size: 12px;
  color: #999;
}

.reply-text {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  word-break: break-word;
  color: #333;
}

.reply-to {
  color: #1890ff;
  font-weight: 500;
}

.reply-actions {
  display: flex;
  gap: 5px;
  font-size: 10px;
  align-items: center;
  cursor: pointer;
  color: #999;
  &:hover {
    color: #1890ff;
  }
  &.active {
    color: #1890ff;
  }
}
</style>
